<template>
	<view class="">
		<form @submit="formSubmit">
					<scroll-view scroll-y>
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									本科毕业单位代码
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="benKeGraduateUnitCode" placeholder="输入代码" :value="benKeGraduateUnitCode"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									本科毕业单位
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="benKeGraduateUnit" placeholder="输入单位" :value="benKeGraduateUnit"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									本科毕业日期
								</view>
							</view>
							<view class="right">
								<view class="right">
									<picker mode="date"  @change="benKeGraduateDateChange" :value="benKeGraduateDate" name="date" start="1970-01-01" end="2050-01-01">
										<view class="uni-input">{{benKeGraduateDate}}</view>
									</picker>
									<uni-icons type="forward" size="16"></uni-icons>
											
								</view>			
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									本科专业代码
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="benKeMajorCode" placeholder="输入代码" :value="benKeMajorCode"/>
										
							</view>
						</view>
						
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									本科专业名称
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="benKeMajorName" placeholder="输入名称" :value="benKeMajorName"/>
										
							</view>
						</view>
						
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									本科学习形式
								</view>
							</view>
							<view class="right">
								<picker @change="benKeStudyFormChange" :value="benKeStudyFormIndex" :range="benKeStudyFormArray" name="benKeStudyForm">
									<view class="uni-input">{{benKeStudyFormArray[benKeStudyFormIndex]}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>	
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学士学位单位代码
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="xueShiXueWeiUnitCode" placeholder="输入代码" :value="xueShiXueWeiUnitCode"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学士学位单位
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="xueShiXueWeiUnit" placeholder="输入单位" :value="xueShiXueWeiUnit"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学士学位证书号 
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="xueShiXueWeiCertificateNo" placeholder="输入证书号 " :value="xueShiXueWeiCertificateNo"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学士学位日期
								</view>
							</view>
							<view class="right">
								<picker mode="date"  @change="xueShiXueWeiDateChange" :value="xueShiXueWeiDate" name="date" start="1970-01-01" end="2050-01-01">
									<view class="uni-input">{{xueShiXueWeiDate}}</view>
								</picker>
								<uni-icons type="forward" size="16"></uni-icons>
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学士学位专业代码
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="xueShiXueWeiMajorCode" placeholder="输入代码" :value="xueShiXueWeiMajorCode"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									学士学位专业名称
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="xueShiXueWeiMajorName" placeholder="输入专业名称" :value="xueShiXueWeiMajorName"/>
										
							</view>
						</view>
						
						<view class="rows">
							<view class="left">
								<view class="star">
									*
								</view>
								<view class="text">
									有第2专业
								</view>
							</view>
							<view class="right">
								<input class="uni-input" name="hasSecondMajor" placeholder="输入专业" :value="hasSecondMajor"/>
										
							</view>
						</view>
						
						
						
				</scroll-view>		
						<view class="uni-btn-v">
							<button form-type="submit" class="but">确认提交</button>
						
						</view>
		</form>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const benKeGraduateUnitCode =ref('');//本科毕业单位代码
const benKeGraduateUnit =ref('');//本科毕业单位
const benKeGraduateDate =ref('0000-00-00');//本科毕业日期
const benKeMajorCode =ref('');//本科专业代码
const benKeMajorName =ref('');//本科专业名称
const benKeStudyFormArray =ref(['请选择','函数','旁听','全日制']);//本科学习形式
const benKeStudyFormIndex =ref(0);
const xueShiXueWeiUnitCode =ref('');//学士学位单位代码
const xueShiXueWeiUnit =ref('');//学士学位单位
const xueShiXueWeiCertificateNo =ref('');//学士学位证书号
const xueShiXueWeiDate =ref('0000-00-00');//学士学位日期 
const xueShiXueWeiMajorCode =ref('');//学士学位专业代码
const xueShiXueWeiMajorName =ref('');//学士学位专业名称
const hasSecondMajor =ref('');//有第2专业

const formSubmit = (e)=>{
	console.log(e);
}

// 侨属选择
const benKeStudyFormChange = (e)=>{
	
	benKeStudyFormIndex.value = e.detail.value;
}


// 本科毕业日期选择
const benKeGraduateDateChange = (e)=>{
	
	benKeGraduateDate.value = e.detail.value;
}

// 学士学位毕业日期选择
const xueShiXueWeiDateChange = (e)=>{
	
	xueShiXueWeiDate.value = e.detail.value;
}


</script>

<style lang='scss' scoped>
	 scroll-view{
	 	height:73vh;
	 	padding: 20rpx 0;
	 }
	 .rows{
	 	display: flex;
	 	justify-content: space-between;
	 	font-size: 26rpx;
	 	line-height: 60rpx;
	 	border-bottom: 1rpx solid #ccc;
	 	margin-bottom: 20rpx;
	 	.left{
	 		display: flex;
	 		justify-content: space-between;
	 		.star{
	 			color:red;
	 		}
	 	}
	 	.right{
	 		display: flex;
	 		justify-content: space-between;
	 		align-items: center;
	 		text-align: right;
	 		color:$xx-color-body;
	 	}
	 }
	 
	 .but{
	 			width: 500rpx;
	 			height: 80rpx;
	 			border-radius: 40rpx;
	 			background: $xx-color-body;
	 			color: #fff;
	 }
	 button::after{ border: none;}
	 button{
	 	line-height:80rpx;
	 }      
</style>